Wie funktioniert Redux? Was sind die Vorteile vom Debuggen? Was lernen die Teilnehmer auf den Angular Days? Und was hat Redux eigentlich mit React zu tun? All diese Fragen beantwortet Tobias Struckmeier (Crosscan) im Interview mit Mirko Hillert (Entwickler Akademie).

Mirko Hillert: Du hast gestern den Workshop „Redux-Basics“ gehalten. Was verbirgt sich hinter dem Begriff Redux?

Tobias Struckmeier: Redux ist eine Wortkombination aus Reducern und Flux. Das ist ein Predictable-State-Container, also eine Library, mit der ich meinen Application State managen kann. Das geschieht dann auf eine ganz bestimmte Art und Weise.

Mirko Hillert: Wie funktioniert Redux?

Tobias Struckmeier: Redux ist ein Predictable-State-Container. Das wird über zwei Patterns erreicht. Das eine ist eine Command Query Responsibility Segregation (CQRS). Da geht es um die Trennung der Veränderung an dem State, rein über Commands. Ich gebe Commands rein, dispatche sie an meinen Store und dann ändern Reducer meinen eigentlichen Applications State. Das zweite Pattern ist das Event Sourcing. Ich gebe Abfolgen von Commands an meinen State gebe und kann diese aufgrund des Basis-States jederzeit neu abspielen. Zum Schluss erreiche ich immer wieder den gleichen End State – das ist Redux. Damit hat man immer einen konsistenten State. Diesen kann ich testen, es ist nachvollziehbar und es können zudem auch weitere Features benutzt werden. Diese erleichtern mir das Entwickeln, das Debuggen einer Anwendung wird erleichtert und die Fehleranfälligkeit meiner Anwendung (auf den Store bezogen) wird reduziert.

Mirko Hillert: Was sind die Vorteile vom Debuggen?

Tobias Struckmeier: Der Vorteil ist, dass ich diesen State habe und immer die gleiche Ausführung von Commands. Diese führen dann im Endeffekt wieder zum Gleichen. Ich kann dann einfach einen schon vorhandenen State und diese Abfolge aus meiner Anwendung nehmen und immer wieder abspulen. Wenn ich also einen Fehler beheben möchte, muss ich mich nicht durch mehrere Formulare klicken, um meinen State wieder genauso herzustellen. Ich kann meinen Code direkt fixen und über Hot Code Reloading dafür sorgen, dass er geladen wird. Der State wird dann direkt wieder darauf applied. Das macht einen sehr eleganten Entwicklungsworkflow. Ich kann in meiner Anwendung jederzeit sehen, wie mein State aussieht und wie er sich durch das letzte Command verändert hat. Das führt letztendlich dazu, dass ich mit den Redux-Developertools sowas wie Timetravelling machen kann. Ich habe mich durch meine Anwendung geklickt, möchte etwas erneut abspielen oder zurück zu einem bestimmten Zeitpunkt spulen. Dann bewege ich einfach einen Slider und bin wieder an einem anderen State. Dann kann mich da nochmal durchklicken und schauen, was mit meinem gefixten, geänderten Code passieren würde.

Mirko Hillert: Was lernen die Teilnehmer in deinem Workshop?

Tobias Struckmeier: In meinem Workshop gehe ich darauf ein, wie Redux funktioniert. Ich führe an die Begrifflichkeiten heran, die beim ersten Lesen der Doku schnell überfordern können. Auch für mich war es zu Beginn nicht gerade einfach, in das Thema einzusteigen. Man wird von Paradigmen erschlagen, die nicht jedem bekannt sind. Ich möchte den Teilnehmern in meinem Workshop diese Anfangsschwierigkeiten nehmen, sie durch einen Redux-Store führen und zeigen, wie man ihn aufbaut. Sie sollen von meinen Erfahrungen profitieren können und dadurch schneller vorankommen. Ansonsten kann es sehr schmerzhaft sein, sich diese Learnings alle selbst zu erarbeiten.

Mirko Hillert: Was hat Redux mit React zu tun?

Tobias Struckmeier: Redux ist ein Application State. React ist eine View Library und hat erstmal keinen vorgegebenen Application State. Redux kann man sehr schön mit React verbinden. Das funktioniert auch in einem Angular-Kontext, in dem man es ebenfalls verwenden kann. Wenn man also das Pattern lernt, hilft das eventuell auch dort weiter. In meinem Workshop reichere ich eine bestehende kleine React-Anwendnung, die noch keinen State hat, mit Redux um einen Application State an. Dabei erläutere ich den Aufbau eines Application States und wie man bei der Verbindung mit einer schon kleinen fertigen React-Anwendung vorgeht.

Mirko Hillert: Tobias, ich danke dir für das Interview!

Interviewt von: Mirko Hillert

Mirko Hillert verantwortet seit 2007 als Leiter der Entwickler Akademie den Trainingsbereich bei Software & Support Media. Er studierte Betriebswirtschaft an der Westsächsischen Hochschule Zwickau und der Universidad Valencia sowie Marketing an der Westfälischen Wilhelms-Universität Münster. Als ehemaliger Dozent und Ausbilder für Managementprozesse treibt er seit vielen Jahren die fundierte Aus- und Weiterbildung von Entwicklern und Softwarearchitekten im IT-Markt voran, unter anderem mit innovativen Eventformaten und hochwertigen Trainingsinhalten.